<template>
  <div>
    <carousel></carousel>
    <div class="container">
      <div class="Fourgn">
        <div class="title">四大核心功能</div>
        <div class="gnContent">
          <div
            v-for="(item, index) in gnBoxes"
            :key="index"
            class="gnBox"
            :style="getBackgroundStyle(index)"
          >
            <div class="gnTitle">{{ item.title }}</div>
            <div class="gnJs">{{ item.description }}</div>
          </div>
        </div>
      </div>
      <div class="Standard">
        <div class="title">职业标准</div>
        <div class="StandardContent">
          <div class="standard-List">
            <div
              v-for="(item, index) in standardList"
              :key="index"
              class="standard-item"
              :class="{ active: activeStandardIndex === index }"
              @click="selectStandard(index)"
            >
              {{ item.title }}
            </div>
          </div>
          <div class="standard-box">
            <div style="display: flex; margin-bottom: 79px">
              <div>
                <div style="font-size: 20px; font-weight: bold">
                  {{ standardList[activeStandardIndex].title }}
                </div>
                <p style="font-size: 16px; width: 738px">
                  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                </p>
              </div>
              <el-button style="width: 140px; height: 50px; margin: 17px 46px"
                >了解详情→</el-button
              >
            </div>
            <div style="display: flex; gap: 68px">
              <div style="width: 374px">
                <div style="font-size: 16px; font-weight: bold">
                  职业技能等级
                </div>
                <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>

                <div style="font-size: 16px; font-weight: bold">
                  国家职业技能标准
                </div>
                <div>人工智能训练师.PDF</div>
              </div>
              <div>
                <div style="font-size: 16px; font-weight: bold">
                  培训参考学时
                </div>
                <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="policy-box">
        <div class="title">政策法规</div>
        <div class="policy">
          <div class="policy-item policy-img">
            <div class="policy-text">
              <div class="policy-title">新闻标题</div>
              <p class="policy-description">
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
              </p>
              <div class="policy-date">2022.2.22</div>
            </div>
          </div>
          <div class="policy-item policy-img">
            <div class="policy-text">
              <div class="policy-title">新闻标题</div>
              <p class="policy-description">
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
              </p>
              <div class="policy-date">2022.2.22</div>
            </div>
          </div>
          <div class="policy-item policy-img">
            <div class="policy-text">
              <div class="policy-title">新闻标题</div>
              <p class="policy-description">
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
              </p>
              <div class="policy-date">2022.2.22</div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 100%; text-align: center; margin-bottom: 74px">
        <el-button link type="primary">查看更多 → </el-button>
      </div>
      <div class="plan">
        <div class="title">通知安排</div>
        <div class="plan-box">
          <div class="plan-item">
            <img src="@/assets/img/image 703@2x.png" />
            <div class="plan-text">
              哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
            </div>
            <div class="plan-time">2020-20-20</div>
          </div>
        </div>
      </div>
      <div class="zizhi">
        <div class="title">机构资质</div>
        <div class="buttonBox">
          <div
            v-for="(item, index) in zizhiButtons"
            :key="index"
            :class="{ active: activeZizhiIndex === index }"
            @click="selectZizhiTab(index)"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="zizhi-box">
          <!-- 这里是根据选中的按钮显示不同的内容 -->
          <div class="zizhi-left">
            <div class="zizhi-title">某某培训机构名称</div>
            <div class="zizhi-text">
              培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构...
            </div>
            <div class="zizhi-img">
              <div style="text-align: center">
                <img src="@/assets/img/Rectangle 1295@2x.png" /> <br />
                机构资质
              </div>
            </div>
            <div>
              <el-button type="primary">查看更多 → </el-button>
            </div>
          </div>
          <div>
            <img class="zizhi-right" src="@/assets/img/Rectangle 1295@2x.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import carousel from "../components/carousel.vue";
import img187 from "@/assets/img/Group 187@2x.png";
import img188 from "@/assets/img/Group 188@2x.png";
import img189 from "@/assets/img/Group 189@2x.png";
import img190 from "@/assets/img/Group 190@2x.png";
const state = reactive({
  gnBoxes: [
    {
      title: "学习中心",
      description: "整合课程，支持学、查、跟踪",
    },
    {
      title: "模考中心",
      description: "仿真题库，助熟悉考试、查缺补漏",
    },
    {
      title: "鉴定中心",
      description: "办鉴定报名，查成绩、领证书",
    },
    {
      title: "就业中心",
      description: "推岗位，帮投简历、解读政策",
    },
  ],
  // 职业标准列表数据
  standardList: [
    { title: "职业技能标准1" },
    { title: "职业技能标准2" },
    { title: "职业技能标准3" },
    { title: "职业技能标准4" },
  ],
  // 当前选中的标准索引
  activeStandardIndex: 0,
  // 当前选中的资质索引
  activeZizhiIndex: 0,
  images: [img187, img188, img189, img190],
  zizhiButtons: [{ title: "培训机构" }, { title: "鉴定机构" }],
});
let {
  gnBoxes,
  standardList,
  activeStandardIndex,
  zizhiButtons,
  activeZizhiIndex,
} = toRefs(state);
// 选择标准
function selectStandard(index) {
  state.activeStandardIndex = index;
}
// 选择资质tab
function selectZizhiTab(index) {
  state.activeZizhiIndex = index;
}
function getBackgroundStyle(index) {
  return {
    backgroundImage: `url(${state.images[index % 4]})`,
    backgroundSize: "cover",
  };
}
</script>

<style lang="scss" scoped>
.container {
  // width: 1920px;
  width: 100%;
  margin: auto;
  .title {
    font-size: 32px;
    text-align: center;
    padding-top: 50px;
    font-weight: 500;
    padding-bottom: 55px;
  }
  .Fourgn {
    height: 600px;
    background-color: #eef5ff;
    .gnContent {
      height: 370px;
      display: flex;
      justify-content: center;
      gap: 20px;
      .gnBox {
        width: 335px;
        height: 370px;
        .gnTitle {
          font-size: 28px;
          font-weight: bold;
          margin: 40px auto 10px 34px;
        }
        .gnJs {
          font-size: 16px;
          color: #626771;
          margin-left: 34px;
        }
      }
    }
  }
  .Standard {
    margin-bottom: 10px;
    .StandardContent {
      display: flex;
      gap: 20px;
      justify-content: center;
      .standard-List {
        background-color: #ebf0fe;
        width: 335px;
        height: 420px;
        border-radius: 10px;
        padding: 40px 0;
        overflow-y: auto;
        box-sizing: border-box;
        .standard-item {
          height: 70px;
          line-height: 70px;
          margin-bottom: 15px;
          font-size: 20px;
          text-align: center;
          cursor: pointer;
          &.active {
            background-color: white;
            border-left: 4px solid #1890ff;
            color: #1890ff;
            font-weight: bold;
          }
        }
      }
      .standard-box {
        width: 1045px;
        height: 420px;
        border-radius: 10px;
        background: url("@/assets/img/Group 191@2x.png");
        background-repeat: no-repeat;
        background-size: cover;
        box-sizing: border-box;
        padding: 39px 60px;
      }
    }
  }
  .policy {
    display: flex;
    justify-content: center;
    gap: 19px;
    margin-bottom: 45px;
    .policy-item {
      width: 454px;
      height: 400px;
      .policy-text {
        background-color: white;
        border-radius: 10px;
        margin-top: 190px;
        height: 210px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        padding: 40px;
        box-sizing: border-box;
        .policy-title {
          font-weight: bold;
          font-size: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .policy-description {
          font-size: 16px;
          color: #626771;
          // 两行
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .policy-date {
          font-size: 14px;
          color: #626771;
          float: right;
          margin-top: 32px;
        }
      }
    }
    .policy-img {
      background-image: url("@/assets/img/Mask group@2x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  .plan {
    background-color: #eef5ff;
    .plan-box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-content: center;
      max-width: 1400px;
      margin: 0 auto;
      gap: 20px;
      padding-bottom: 131px;
      .plan-item {
        width: 690px;
        height: 120px;
        border-radius: 10px;
        padding-left: 20px;
        padding-right: 40px;
        display: flex;
        align-items: center;
        img {
          width: 120px;
          height: 120px;
        }
        .plan-text {
          margin-left: 20px;
          margin-right: 40px;
          font-size: 16px;
          width: 374px;
          // 两行
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .plan-time {
          font-size: 14px;
          color: #626771;
        }
      }
    }
  }
  .zizhi {
    margin-bottom: 80px;
    .title {
      font-size: 32px;
      text-align: center;
      padding-top: 50px;
      font-weight: 500;
      padding-bottom: 55px;
    }

    .buttonBox {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-bottom: 30px;

      div {
        border: none;
        border-radius: 20px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        background-color: transparent;
        color: #000;
        transition: all 0.3s ease;
        user-select: none; /* 防止文本被选中 */

        &.active {
          background-color: #1890ff;
          color: #fff;
        }
      }
    }

    .zizhi-box {
      width: 1400px;
      margin: auto;
      border-radius: 10px;
      height: 500px;
      padding: 70px;
      box-sizing: border-box;
      background-color: #f4f7fe;
      display: flex;
      .zizhi-left {
        margin-right: 84px;
        width: 660px;
        .zizhi-title {
          font-size: 20px;
          font-weight: bold;
        }
        .zizhi-text {
          font-size: 16px;
          color: #626771;
          // 4行
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: 12px;
          margin-bottom: 20px;
        }
        .zizhi-img {
          display: flex;
          align-items: center;
          gap: 20px;
          img {
            width: 146px;
            height: 94px;
            margin-bottom: 10px;
          }
        }
        button {
          margin-top: 33px;
        }
      }
      .zizhi-right {
        width: 542px;
        height: 380px;
      }
    }
  }
}
</style>
